import React from 'react'
import { connect } from 'dva'
import { Card,Table } from 'antd'



/**
 * MonthlyReturnList 月度回报统计表
 */

const MonthlyReturnList = ({
  data
}) => {
 
  // 年份
  const years=[]
  const yearArr = data&&data.length&&data.map(item => item.date.split('-')[0])
  if(yearArr){
    //遍历数组
  for (var i = 0; i < yearArr.length; i++) {
    if (years.indexOf(yearArr[i]) == -1) {  //判断在s数组中是否存在，不存在则push到s数组中
      years.push(yearArr[i]);
    }
  }
  // 补充无数据
  for(let i=parseInt(data[0].date.split('-')[1])-1;i>0;i--){
    data.unshift({
      date: years[0]+'-'+i,
      value: '-',
    })
  }
  for(let i=parseInt(data[data.length-1].date.split('-')[1])+1;i<13;i++){
    data.push({
      date: years[years.length-1]+'-'+i,
      value: '-',
    })
  }
  }
  
  
  // 表格设置
  const months=['1','2','3','4','5','6','7','8','9','10','11','12']
  // 表格数据设置
  let dataSource=[]
    years.map((item,index)=>{
      const obj={}
      obj.name=item
      months.map(iit=>{
        const dd=data.find(it=>(it.date.split('-')[0]==item)&&(parseInt(it.date.split('-')[1])==iit))
        // obj['month'+iit]=dd.value!=='-'?`${Math.signFigures(dd.value * 100)}%`:dd.value
        obj['month'+iit]=dd.value!=='-'?`${Math.signFigures(dd.value * 100)}%`:dd.value
        if(dd.value ==='-'){
          obj['month'+iit]=dd.value
        }
        else if(dd.value*1 <0){
          obj['month'+iit]=<span style={{color:'#417505'}}>{Math.signFigures(dd.value * 100)}%</span>
        }
        else{
          obj['month'+iit]=<span style={{color:'#D0021B'}}>{Math.signFigures(dd.value * 100)}%</span>
        }
      })
      dataSource.push(obj)
    })
  // 表头设置
  const columns=[{
    title: '年份',
    dataIndex: 'name',
    key: 'name',
  }]
  months.map(item=>{
    columns.push({
      title: item+'月',
      dataIndex: 'month'+item,
      key: 'month'+item,
    })
  })
  return <Table dataSource={dataSource} columns={columns} rowKey='name' pagination={false} loading={!data} />
}

/**
 * MonthlyReturn 月度回报
 * 引用组件
 * MonthlyReturnList 月度回报统计表
 */
import DefinitionList from '../../../components/DefinitionList'
class MonthlyReturn extends React.Component {
  state={
    data:this.props.monthlyReturn,
  }
  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if((nextProps.lPortId!==this.props.lPortId)||(nextProps.cBenchCode!==this.props.cBenchCode)){
      this.fetchData(nextProps)
    }
    if(nextProps.monthlyReturn!==this.props.monthlyReturn){
      this.setState({
        data:nextProps.monthlyReturn,
      })
    }
  }
  fetchData=(props)=>{
    this.props.dispatch({
      type:'combinatorialAnalysis/getMonthlyReturn',
      payload:props
    })
  }
  render() {
    /*
    const {list,total}=this.state.data
    return (
      <Card title='月度回报'  className="monthlyReturn">
        <MonthlyReturnList data={list}></MonthlyReturnList>
        <DefinitionList name='累计：' value={((total===null)||(total===undefined))?'-':total.toPercent()} />
      </Card>
    )*/
    const {list,total}=this.state.data
    let totalpre 
    if (total===null||total===undefined) {
      totalpre =  '-' 
    } else if(total<0){
      totalpre = <span style={{color:'#417505'}}>{total.toPercent()}</span>
    }else{
      totalpre = <span style={{color:'#d0021b'}}>{total.toPercent()}</span> 
    }
    return (
      <Card title='月度回报'  className="monthlyReturn">
        <MonthlyReturnList data={list}></MonthlyReturnList>
        <DefinitionList name='累计：' value={totalpre} />
      </Card>
    )
  }
}

MonthlyReturn.defaultProps={
  lPortId:null,
  cBenchCode:null,
  monthlyReturn:{
    list: [
      {
        date: '2017-03',
        value: 0.3456,
      }, {
        date: '2017-04',
        value: 0.3456,
      }, {
        date: '2017-05',
        value: 0.3456,
      }, {
        date: '2017-06',
        value: 0.3456,
      }, {
        date: '2017-07',
        value: 0.3456,
      }, {
        date: '2017-08',
        value: 0.3456,
      }, {
        date: '2017-09',
        value: 0.3456,
      }, {
        date: '2017-10',
        value: 0.3456,
      }, {
        date: '2017-11',
        value: 0.3456,
      }, {
        date: '2017-12',
        value: 0.3456,
      }, {
        date: '2018-01',
        value: 0.3456,
      }, {
        date: '2018-02',
        value: 0.3456,
      }, {
        date: '2018-03',
        value: 0.3456,
      }
    ],
    total:1.4567
  }
  
}

export default connect()(MonthlyReturn)
